<template>
	<view class="video">
		<video id="muuVideo" 
		:src="src" 
		:poster="poster" 
		object-fit="fill" 
		direction="90" 
		show-mute-btn="true" 
		page-gesture="true" 
		@play="playStart" 
		@pause="playPause" 
		@ended="playEnded" 
		@timeupdate="playTimeCallback" 
		@error="videoErrorCallback" 
		controls 
		:style="{height: height}"
	></video>
	</view>
</template>

<script>

	export default {
		name: 'VideoPlayer',
		props: {
			data: {
				type: Object,
				default: {}
			}
		},

		data() {
			return {
				height: '235px',
				src: '',
				poster: '',
			}
		},

		created() {
			let _this = this
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('muuVideo',this)
			// #endif
			this.$nextTick(() => {
				_this.getVideoPlayerHeight('#muuVideo');
			})
			console.log('视频播放器')
			//console.log(this.data.video_chapter)
		},
		
		methods: {

			getVideoPlayerHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					let width = res[0][0].width
					let height = width/1.7777778
					this.height = height + 'px';
					this.$emit("setVideoPlayerHeight",this.height);
				})
			},
			/**
			 * 设置播放器封面
			 */
			setPoster(poster) {
				this.poster = poster
			},
			/**
			 * 设置播放内容路径
			 */
			setSrc(src) {
				let that = this
				// 停止播放
				this.videoContext.stop()
				this.src = src
				this.$nextTick(() => {
					// 立即播放
					that.videoContext.play()
				})
				
			},
			
			/**
			 * 当开始、继续播放时触发
			 * @param {Object} e
			 */
			playStart(e){
				console.log('开始播放')
			},
			
			/**
			 * 视频暂停时触发
			 */
			playPause(e){
				console.log('播放暂停')
			},
			
			/**
			 * 视频播放结束时
			 */
			playEnded(e){
				console.log('播放结束')
			},
			
			/**
			 * 播放进度变化时触发
			 * @param {Object} e
			 */
			playTimeCallback: function(e){
				//console.log(e.detail)
			},
			videoErrorCallback: function(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.video {
		video {
			width: 100%;
		}
	}
</style>
